import React from 'react'
import { Kui, PropTypes } from '../kui'
import Icon from '../icon'

export default class Button extends Kui {

  static propTypes = {
    htmlType: PropTypes.oneOf(["button", "submit", "reset"]),
    icon: PropTypes.string,
    block: PropTypes.bool,
    size: PropTypes.oneOf(['small', 'large', 'default']),
    loading: PropTypes.bool,
    circle: PropTypes.bool,
    type: PropTypes.oneOf(["danger", "primary", "link", "default", "dashed"]),
    hollow: PropTypes.bool,
  }

  static defaultProps = {
    type: 'default',
    size: 'default',
    htmlType: 'button'
  }

  render() {
    const { type, loading, circle, hollow,
      htmlType, icon, children, size, block } = this.props
    const onlyIcon = !(children && children.length)
    const cls = this.className([
      "k-btn",
      {
        [`k-btn-${type}`]: !!type && type != 'default',
        ["k-btn-sm"]: size == 'small',
        ["k-btn-block"]: !!block,
        ["k-btn-loading"]: loading,
        ["k-btn-icon-only"]: onlyIcon,
        ["k-btn-lg"]: size == 'large',
        ["k-btn-circle"]: !!circle,
        ["k-btn-hollow"]: !!hollow
      }
    ])
    const iconType = loading ? 'sync' : icon;

    const iconNode = iconType ? <Icon type={iconType} spin={loading} /> : null
    const options = { ...this.props };
    ['hollow', 'circle', 'loading', 'block'].map(a => delete options[a])
    const props = Object.assign(options, {
      type: htmlType,
      style: this.styles(),
      className: cls,
    })
    const childs = React.Children.map(children, child => {
      return <span>{child}</span>
    })
    delete props.htmlType
    return <button {...props}>
      {iconNode}
      {childs}
    </button>
  }
}
